<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">
<ui:composition template="/resources/template/layoutMenu.xhtml">
	<ui:define name="content">
		<div id="container" style="width: 100%;">
			<!-- Cabecera -->
			<div id="header">
				<!-- Menu - Crear un nuevo Catalogo -->
				<p:toolbar>
					<p:toolbarGroup>
						<p:commandButton type="button" value="Crear" icon="ui-icon-folder-open" onclick="PF('dlg').show();" styleClass="negrita" />
					</p:toolbarGroup>
				</p:toolbar>
				<!-- Popup - Regitra un Nuevo Catalogo -->
				<p:dialog id="dialogCatalogoId" header="Registrar un Nuevo Catalogo" widgetVar="dlg" modal="true" appendTo="@(body)" resizable="false">
					<h:form id="registrarCatalogoFormId">
						<h:panelGrid columns="2">
							<h:outputLabel value="Descripcion: *" for="descripcionTxt" />
							<p:inputText id="descripcionTxt" value="#{detalleCatalogoBean.descripcionCatalogo}" />

							<p:commandButton value="Registrar" update=":catalogosFormId:catalogosId" action="#{detalleCatalogoBacking.registrarCatalogo}"
								oncomplete="PF('dlg').hide();">
								<p:collector value="#{detalleCatalogoBacking.catalogo}" addTo="#{detalleCatalogoBacking.catalogos}" />
							</p:commandButton>
							<p:commandButton value="Reset" type="reset" />
						</h:panelGrid>
					</h:form>
				</p:dialog>
			</div>

			<!-- Menu Izquierda - Lista de Catalogos -->
			<div id="menu" style="float: left; padding-top: 5px; width: 25%">
				<h:form id="catalogosFormId">
					<p:outputPanel id="catalogosId">
						<p:dataList id="catalogoListId" value="#{detalleCatalogoBacking.catalogos}" var="catalogo" paginator="true" rows="5"
							rowsPerPageTemplate="5,10,15" type="none">
							<f:facet name="header">Catalogos</f:facet>
							<table cellpadding="3">
								<tr>
									<td><p:commandButton icon="ui-icon-pencil" onclick="detalleCatalogoOutPanelId.show()">
											<f:setPropertyActionListener value="#{catalogo}" target="#{detalleCatalogoBacking.catalogo}" />
										</p:commandButton></td>
									<td><h:outputText value="#{catalogo.descripcion}" /></td>
								</tr>
							</table>
						</p:dataList>
					</p:outputPanel>
				</h:form>
			</div>

			<!-- Body -->
			<div id="content" style="float: left; margin: 5px; width: 74%">
				<!-- Panel - Registrar un nuevo Detalle del Catalogo Seleccionado -->
				<p:outputPanel id="detalleCatalogoOutPanelId" rendered="#{detalleCatalogoBacking.activarPanelDescripcionCatalgo}">
					<table style="width: 100%">
						<tr>
							<th>#{detalleCatalogoBacking.catalogo.descripcion}</th>
						</tr>
						<tr>
							<td>
								<!-- Menu - Crear un nuevo Detalle Catalogo --> <p:toolbar>
									<p:toolbarGroup>
										<p:commandButton type="button" value="Crear" icon="ui-icon-folder-open" onclick="PF('dlgCrearDetalle').show();" styleClass="negrita" />
									</p:toolbarGroup>
								</p:toolbar> <!-- Popup - Regitra un Nuevo Detalle del Catalogo --> <p:dialog id="dialogDetalleCatalogoId"
									header="Registrar un Nuevo Detalle - #{detalleCatalogoBacking.catalogo.descripcion}" widgetVar="dlgCrearDetalle" modal="true"
									appendTo="@(body)" resizable="false">
									<h:form id="registrarDetalleCatalogoFormId">
										<h:panelGrid columns="2" cellpadding="1">
											<h:outputLabel value="Codigo: *" for="codigoDetCatTxt" />
											<p:inputText id="codigoDetCatTxt" value="#{detalleCatalogoBean.codDetalleCatalogo}" required="true" />

											<h:outputLabel value="Descripcion: *" for="descripcionDetCatTxt" />
											<p:inputText id="descripcionDetCatTxt" value="#{detalleCatalogoBean.descripcionDetalleCatalogo}" required="true" />

											<p:commandButton value="Registrar" update=":detalleFormId:tableDetalleId" action="#{detalleCatalogoBacking.registrarDetalleCatalogo}"
												oncomplete="PF('dlgCrearDetalle').hide();">
												<p:collector value="#{detalleCatalogoBacking.detalleCatalogo}" addTo="#{detalleCatalogoBacking.detallesCatalogo}" />
											</p:commandButton>
										</h:panelGrid>
									</h:form>
								</p:dialog>
							</td>
						</tr>
						<tr>
							<td><h:form id="detalleFormId">
									<!--Tabla - Detalles del Catalogo -->
									<p:dataTable id="tableDetalleId" var="detalleCatalogo" value="#{detalleCatalogoBacking.detallesCatalogo}" paginator="true" rows="5">
										<p:column headerText="Codigo">
											<h:outputText value="#{detalleCatalogo.codDetalleCatalogo}" />
										</p:column>
										<p:column headerText="Descripcion">
											<h:outputText value="#{detalleCatalogo.descripcion}" />
										</p:column>
										<p:column style="width:4%">
											<p:commandButton id="selectButtonId" update=":detalleFormId:" oncomplete="depDetCatDialog.show()" icon="ui-icon-search">
												<f:setPropertyActionListener target="#{detalleCatalogoBacking.detalleCatalogo}" value="#{detalleCatalogo}" />
											</p:commandButton>
										</p:column>
									</p:dataTable>

									<!-- Popup - Registrar la Dependencia de un Detalle del Catalogo -->
									<p:dialog id="depDetCatId" header="Registar Dependencia - #{detalleCatalogoBacking.detalleCatalogo.descripcion}" widgetVar="depDetCatDialog"
										modal="true" appendTo="@(body)" resizable="false">
										<!--Tabla - Detalles del Catalogo -->
										<p:dataTable id="tableDepDetCatalogoId" var="depDetCatalogo" value="#{detalleCatalogoBacking.detallesCatalogoDep}" paginator="true" rows="5">
											<p:column headerText="Codigo">
												<h:outputText value="#{depDetCatalogo.codDetalleCatalogo}" />
											</p:column>
											<p:column headerText="Descripcion">
												<h:outputText value="#{depDetCatalogo.descripcion}" />
											</p:column>
										</p:dataTable>
									</p:dialog>
								</h:form></td>
						</tr>
					</table>
				</p:outputPanel>
			</div>
		</div>
	</ui:define>
</ui:composition>
</html>